<template>
  <div id="login">
    <div class="login_centent">
      <div class="login">
        <div class="title">酒店后台管理系统</div>
        <div class="form_wrap">
          <el-form
            ref="loginform"
            :model="loginform"
            :rules="rules"
            v-if="loginOrRegistered == 0"
          >
            <el-form-item prop="phone">
              <el-input 
                v-model="loginform.phone"
                placeholder="输入手机号"
                clearable
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="loginform.password"
                placeholder="输入密码"
                clearable
                show-password
              />
            </el-form-item>
            <el-form-item label="请选择身份">
              <el-radio-group v-model="identity">
                <el-radio label="normal">客户</el-radio>
                <el-radio label="admin">管理员</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <el-form
            ref="loginform"
            :model="registeredform"
            :rules="rules"
            v-if="loginOrRegistered == 1"
          >
            <el-form-item prop="phone">
              <el-input
                v-model="registeredform.phone"
                placeholder="输入手机号"
                clearable
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="registeredform.password"
                placeholder="输入密码"
                show-password
                clearable
              />
            </el-form-item>
            <el-form-item prop="verificationCode">
              <el-row :gutter="20">
                <el-col :span="14" gutter>
                  <el-input
                    v-model="registeredform.code"
                    placeholder="验证码"
                  />
                </el-col>
                <el-col :span="8">
                  <el-button
                    type="success"
                    @click="getVerificationCode"
                    :disabled="getVerificationCodeBtnStateIsDisable"
                    >获取验证码{{
                      getVerificationCodeBtnStateIsDisable && timer > 0
                        ? `(${timer})`
                        : ""
                    }}</el-button
                  >
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </div>
        <div class="btn_group" v-if="loginOrRegistered != 1">
          <el-button type="primary" @click="handleLoginClick">
            登 陆
          </el-button>
          <el-button @click="loginOrRegistered = 1"> 注 册 </el-button>
          <div class="text_button" @click="loginOrRegistered = 1">
            忘记密码？
          </div>
        </div>
        <div class="btn_group" v-else>
          <el-button type="primary" @click="handleRegistered">
            注 册
          </el-button>
          <el-button type="text" @click="loginOrRegistered = 0">
            已有账号，去登陆→
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 定义邮箱验证对象
var checkPhone = (rule, value, callback) => {
  const mailReg = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
  if (!value) {
    return callback(new Error("手机号不能为空"));
  }
  setTimeout(() => {
    if (mailReg.test(value)) {
      callback();
    } else {
      callback(new Error("请输入正确的手机号"));
    }
  }, 100);
};
export default {
  data() {
    return {
      account: "18206633843",
      password: "admin1",
      // 登陆的表单
      loginform: {
        phone: "",
        password: "",
      },
      // 注册的表单
      registeredform: {
        phone: "",
        password: "",
        code: "",
      },
      rules: {
        phone: [{ validator: checkPhone, trigger: "blur" }],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
      },
      identity: "normal",
      // 登陆/注册选项卡
      loginOrRegistered: 0,
      // 倒计时定时器
      countdownTimer: null,
      //获取验证码按钮禁用状态
      getVerificationCodeBtnStateIsDisable: false,
      timer: 60,
    };
  },
  created() {},
  methods: {
    // 注册
    async handleRegistered() {
      const data = await this.$http.post(`/banservice/user/register`, {
        ...this.registeredform,
      });
      console.log(data);
      this.registeredform = {
        phone: "",
        password: "",
        code: "",
      };
      this.loginOrRegistered = 0;
      this.$message.success("注册成功");
    },
    // 点击登陆按钮
    async handleLoginClick() {
      if (this.identity == "normal") {
        if (!(this.loginform.phone && this.loginform.password)) {
          return this.$message.warning("请填写完整");
        }
        const res = await this.$http.post("/banservice/user/login", {
          ...this.loginform,
        });
        if (!res.data.success) {
          return this.$message.error(res.data.data.msg);
        }
        window.sessionStorage.setItem("phone", res.data.data.id);

        this.$message.success("登陆成功，正在跳转");
        this.$router.push("/register");
      } else {
        if (
          this.loginform.phone === this.account &&
          this.loginform.password === this.password
        ) {
          this.$message.success("登陆成功，正在跳转");
          this.$router.push("/adminUser");
        } else {
          this.$message.error("账号或者密码错误，请重新核对！");
        }
      }
    },
    // 发起登陆请求
    async login() {},
    // 获取验证码按钮
    async getVerificationCode() {
      // 先清空定时器
      clearInterval(this.countdownTimer);
      if (!this.registeredform.phone) {
        return this.$message.warning("请输入手机号");
      }
      this.getVerificationCodeBtnStateIsDisable = true;
      this.countdownTimer = setInterval(() => {
        if (this.timer > 0) this.timer--;
        if (this.timer == 0) {
          this.getVerificationCodeBtnStateIsDisable = false;
          this.timer = 60;
        }
      }, 1000);
      this.$http.get(`/banservice/user/sendmsg/${this.registeredform.phone}`);
      this.$message.success("获取验证码成功,请注意查收");
      // this.$message.error("验证码错误");
    },
  },
};
</script>

<style lang="less" scoped>
#login {
  background: url(../assets/img/bg.jpg) left/ contain no-repeat fixed;
  width: 100vw;
  height: 100vh;
  background-color: #545c64;
  .login_centent {
    width: 27%;
    height: 380px;
    background-color: rgba(0, 0, 0, 0.5);
    position: relative;
    top: 50%;
    left: 85.2%;
    transform: translate(-50%, -50%);
    border-radius: 16px;
    .login {
      .title {
        position: absolute;
        font-size: 45px;
        width: 100%;
        text-align: center;
        top: -80px;
        color: #66b1ff;
      }
    }
    .form_wrap {
      width: 50%;
      position: absolute;
      top: 44%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .btn_group {
      width: 50%;
      position: absolute;
      top: 80%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: space-between;
      .text_button {
        font-size: 14px;
        position: absolute;
        bottom: -35px;
        right: -10px;
        color: #409eff;
        cursor: pointer;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
  /deep/ .el-form-item__label {
    color: #ccc;
  }
}
</style>>
